<template>
  <div id="pop-up">
    <van-action-sheet v-model="show">
      <div class="head">
        <div class="cancel" @click="show = false">取消</div>
        <div class="title">{{ popUpTitle }}</div>
        <div class="confirm" @click="confirm">确定</div>
      </div>
      <div class="content">
        <template v-if="popUpType == 'email'">
          <van-field v-model.trim="email" label="邮箱" placeholder="请输入邮箱" input-align="right" />
        </template>
        <template v-else-if="popUpType == 'alipay'">
          <van-field v-model.trim="alipayForm.alipay" label="账号" placeholder="请输入支付宝邮箱或绑定的手机号" input-align="right" />
          <van-field v-model.trim="alipayForm.alipayname" label="姓名" placeholder="请输入身份证真实姓名" input-align="right" />
        </template>
        <template v-else-if="popUpType == 'weChat'">
          <van-field v-model.trim="weChatForm.wechat" label="账号" placeholder="请输入账号" input-align="right" />
        </template>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  props: ["type"],
  data() {
    return {
      show: false,
      popUpType: "",
      popUpTitle: "",
      dataList: [],
      alipayForm: {
        //支付宝
        alipay: "",
        alipayname: ""
      },
      weChatForm: {
        //微信
        wechat: ""
      },
      email: ""
    };
  },
  methods: {
    checkShow() {
      this.show = true;
    },
    stateChanges(e) {
      console.log(e);
      if (e == "alipay") {
        this.popUpType = e;
        this.popUpTitle = "支付宝账号";
      } else if (e == "weChat") {
        this.popUpType = e;
        this.popUpTitle = "微信号";
      } else if (e == "email") {
        this.popUpType = e;
        this.popUpTitle = "邮箱";
      }
    },
    confirm() {
      //弹窗确定
      var that = this;
      let url = "";
      let json = {};

      if (this.popUpType == "alipay") {
        if (this.fun.isTextEmpty(this.alipayForm.alipay)) {
          that.$dialog.alert({
            message: "请输入账号"
          });
          return;
        }
        if (this.fun.isTextEmpty(this.alipayForm.alipayname)) {
          that.$dialog.alert({
            message: "请输入姓名"
          });
          return;
        }
        url = "member.member-info.change-alipay-info";
        json = this.alipayForm;
      } else if (this.popUpType == "weChat") {
        if (this.fun.isTextEmpty(this.weChatForm.wechat)) {
          that.$dialog.alert({
            message: "请输入账号"
          });
          return;
        }
        url = "member.member-info.change-wechat";
        json = this.weChatForm;
      } else if (this.popUpType == "email") {
        url = "member.member-info.changeEmail";
        json = {
          email: this.email
        };
      }
      $http.post(url, json, "正在提交数据...").then(
        function(response) {
          console.log(response.data);
          if (response.result == 1) {
            that.$dialog.alert({
              message: response.msg
            });
            that.$parent.getData();
            that.show = false;
          } else {
            that.$dialog.alert({
              message: response.msg
            });
          }
        },
        function(response) {
          that.$dialog.alert({
            message: response.msg
          });
        }
      );
    },
    SelectLabel(value) {
      if (this.popUpType == "checkbox") {
        let arry = (this.dataList[value].checked = true);
        this.$set(this.dataList[value], value, arry);
      } else {
        this.dataList.forEach((item, index) => {
          if (value == index) {
            let arry = (this.dataList[value].checked = true);
            this.$set(this.dataList[value], value, arry);
          } else {
            let arry = (this.dataList[index].checked = false);
            this.$set(this.dataList[index], index, arry);
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scope>
#pop-up {
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;

    .cancel {
      line-height: 1.5rem;
      letter-spacing: 0;
      color: #aaaab3;
    }

    .title {
      line-height: 1.5rem;
      letter-spacing: 0;
      color: #3b3b4a;
    }

    .confirm {
      line-height: 1.5rem;
      letter-spacing: 0;
      color: #3b3b4a;
    }
  }

  .content {
    display: flex;
    flex-flow: wrap;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    margin-bottom: 3.438rem;

    .list {
      padding: 0.53rem 0.96rem;
      border-radius: 0.938rem;
      margin-top: 1rem;
      margin-left: 1.3rem;
    }
  }
}
</style>
